<template>
  <div class="login_container">
    <!-- :xs="0" 屏幕宽度<=768，左侧占位内容不显示 -->
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms">
          <h1>Hello</h1>
          <h2>欢迎登录</h2>
          <el-form-item prop="username">
            <el-input :prefix-icon="User" v-model="loginForm.username"/>
          </el-form-item>
          <el-form-item prop="password">
            <el-input :prefix-icon="Lock" type="password" v-model="loginForm.password" show-password/>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" class="login_btn" type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { User,Lock } from "@element-plus/icons-vue";
// @ts-ignore
import {reactive,ref} from 'vue'
import useUserStore from '@/store/modules/user.ts'
import { useRouter,useRoute } from "vue-router";
import { ElNotification } from "element-plus";
// 引入获取当前时间的函数
import {getTime} from '@/utils/time'
// 获取el-form实例
let loginForms = ref()
let $router = useRouter() // 获取路由器对象
let $route = useRoute() // 获取路由对象
let userStore = useUserStore()
// 定义变量控制按钮加载效果
let loading = ref(false)
//收集账号与密码的数据
let loginForm = reactive({username:'admin',password:'111111'})
const login = async() => {
  // 保证全部表单项校验通过再发请求
  await loginForms.value.validate()
  loading.value = true //开始加载
  // 通知仓库发生登录请求
  // 请求成功->首页展示数据
  // 请求失败->登录失败提示
 try{
  // 保证登录成功
  await userStore.userLogin(loginForm)
  // // 编程式导航跳转到首页
  // $router.push('/')
  // 判断登录路由路径中是否有query参数，如果有就往querry参数跳转，没有就跳转首页
  let redirect:any = $route.query.redirect
  $router.push({path:redirect||'/'})
  // 登录成功提示信息
  ElNotification({
    type:'success',
    message:'欢迎回来',
    title:`HI，${getTime()}好`
  })
  loading.value = false //结束加载
 }catch(error){
  loading.value = false //结束加载
  // 登录失败提示信息
  ElNotification({
    type:'error',
    message:(error as Error).message //TypeScript 允许你覆盖它的推断，并且能以你任何你想要的方式分析它，这种机制被称为「类型断言」
  })
 }
}

// 自定义校验规则函数
const validatorUserName = (rule: any, value: any, callback: any)=> {
  // rule 校验对象，value 文本内容，callback 符号条件-规则放行，不符合-注入错误信息
  if(value.length >= 5){
    callback()
  }else{
    callback(new Error('账号长度至少五位'))
  }
}
const validatorPassword = (rule: any, value: any, callback: any)=> {
  // rule 校验对象，value 文本内容，callback 符号条件-规则放行，不符合-注入错误信息
  if(value.length >= 6){
    callback()
  }else{
    callback(new Error('密码长度至少六位'))
  }
}
// 定义表单校验配置对象
const rules = {
  username:[
    //规则对象属性:
    //required,代表这个字段务必要校验的
    //min:文本长度至少多少位
    //max:文本长度最多多少位
    //message:错误的提示信息
    //trigger:触发校验表单的时机 change->文本发生变化触发校验,blur:失去焦点的时候触发校验规则
    // { required: true,min: 6, max: 10, message: '账号长度至少六位', trigger: 'change' },
    {trigger: 'change',validator:validatorUserName}
  ],
  password:[
    // { required: true,min: 6, max: 15, message: '密码长度至少六位', trigger: 'change' },
    {trigger: 'change',validator:validatorPassword}
  ],
}
</script>

<style scoped lang="scss">
.login_container{
  width: 100%;
  height: 100vh;
  background:url('@/assets/images/background.jpg') no-repeat;
  background-size: cover; //背景覆盖盒子
  .login_form{
    position: relative;
    width: 70%;
    left: 10vh;
    top: 30vh; //视口宽度的30%
    background:url('@/assets/images/login_form.png') no-repeat;
    background-size: cover; //背景覆盖盒子
    padding: 40px;
    h1{
      color: #fff;
      font-size: 40px;
    }
    h2{
      color: #fff;
      font-size: 20px;
      margin: 20px 0;
    }
    .login_btn{
      width: 100%;
    }
  }
}
</style>